<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>DOM 操作示例</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1 id="title">DOM 操作示例</h1>
    <p class="description">这是一个描述段落。</p>
    <p class="description">这是另一个描述段落。</p>
    <div id="content">
        这是一个内容段落。<br>
        <button onclick="changeContent()">改变内容</button>
    </div>
    <img id="image" src="./eg_bulboff.gif" alt="灯泡"><br>
    <button onclick="toggleImage()">切换图片</button>
    <button onclick="highlightParagraphs()">高亮段落</button>
    <button onclick="addNode()">添加节点</button>
    <button onclick="removeNode()">删除节点</button>
    <script src="./getElement.js"></script>
    <script src="./nodeOperator.js"></script>
    <script>
        // 修改元素内容
        function changeContent() {
            title.innerHTML = 'DOM 操作示例 - 内容已改变';
            content.innerHTML = '<p>内容已被改变。</p>';
        }

        // 切换图片
        function toggleImage() {
            var img = document.getElementById('image');
            if (img.hasAttribute('on')) {
                img.removeAttribute('on');
                img.src = "./eg_bulboff.gif";
            } else {
                img.setAttribute('on', 'true');
                img.src = "./eg_bulbon.gif";
            }
        }

        // 高亮段落
        function highlightParagraphs() {
            for (var i = 0; i < descriptions.length; i++) {
                descriptions[i].style.color = 'red';
                descriptions[i].classList.toggle('highlight');
            }
        }
    </script>
</body>
</html>
